<!DOCTYPE html>
<html lang="zh">

<head>
    <th:block th:include="include :: header('设备统计告警')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <link rel="stylesheet" th:href="@{/css/scenarioCate.css}" href="/css/scenarioCate.css" />
</head>
<style>
    .bootstrap-table .fixed-table-container .fixed-table-body {
        height: 492px;
    }

    .fixed-table-body {
        border: 1px solid #ccc;
    }

    .table-striped table>thead>tr>th,
    .table-striped table>tbody>tr>th,
    .table-striped table>tfoot>tr>th,
    .table-striped table>thead>tr>td,
    .table-striped table>tbody>tr>td,
    .table-striped table>tfoot>tr>td { 
        border: 1px solid #e7eaec;
    }
</style>

<body class="gray-bg">
    <!-- <div class="ui-layout-west">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title"><i class="fa icon-grid"></i>设备监测</div>
                <div class="box-tools pull-right">
                    <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理部门"><i
                            class="fa fa-edit"></i></a>
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display: none">
                        <i class="fa fa-chevron-up"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠">
                        <i class="fa fa-chevron-down"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门">
                        <i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </div> -->

    <div class="ui-layout-center">
        <div class="container-div">
            <div class="row">
                <div class="col-sm-12 select-table table-striped">
                    <div class="top">
                        <form id="user-form">
                            <div class="select-list">
                                <ul>
                                    <!-- <li style="display: flex;">
                                        <label style="margin-right: 10px;width: 80px;">请选择类型:</label>
                                        <select name="type" class="first form-control"  style="width: 95px;">
                                            <option value="0">厂家</option>
                                            <option value="1">设备</option>
                                        </select>
                                    </li> -->
                                    <li style="display: flex;">
                                        <label style="margin-right: 10px;width: 80px;">请选择机构:</label>
                                        <!-- <input type="hidden"  id="azqyname"> -->
                                        <select name="dev_azdw1_id" id="dev_azdw1_select1"
                                            class="first form-control azdw-select1" data-index="1" style="width: 95px;">
                                        </select>
                                    </li>
                                    <li>
                                        <select name="dev_azdw2_id" id="dev_azdw2_select1"
                                            class="second form-control azdw-select1" data-index="2"
                                            style="width: 95px;"></select>
                                    </li>
                                    <li>
                                        <select name="dev_azdw3_id" id="dev_azdw3_select1"
                                            class="third form-control azdw-select1" data-index="3"
                                            style="width: 95px;"></select>
                                    </li>
                                    <li>
                                        <select name="dev_azdw4_id" id="dev_azdw4_select1"
                                            class="fourth form-control azdw-select1" data-index="4"
                                            style="width: 95px;"></select>
                                    </li>
                                    <li>
                                        <select name="dev_azdw5_id" id="dev_azdw5_select1"
                                            class="fifth form-control azdw-select1" data-index="5"
                                            style="width: 95px;"></select>
                                    </li>
                                    <li style="display: flex;">
                                        <label>设备名称:</label>
                                        <select name="id" id="point-select1" style="width:150px"
                                            class="form-control"></select>
                                    </li>
                                    <li>
                                        <a class="btn btn-primary btn-rounded btn-sm" id="search"><i
                                                class="fa fa-search"></i>&nbsp;搜索</a>
                                        <a class="btn btn-warning btn-rounded btn-sm" id="reset"><i
                                                class="fa fa-refresh"></i>&nbsp;重置</a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>
                    <div class="bottom">
                        <div class="buttonCard">
                            <div class="leftChart search-collapse">
                                <div class="title">
                                    <p>数据统计饼状图</p>
                                </div>
                                <h3 class="titleErr" style="text-align: center; line-height: 220px; display: none">
                                    暂无数据
                                </h3>
                                <div class="echarsbox">
                                    <div id="cake" style="width: 100%; height: 270px"></div>
                                </div>
                            </div>
                            <div class="rightChart search-collapse">
                                <div class="title">
                                    <p>数据异常柱状图</p>
                                </div>
                                <h3 class="titleErr" style="text-align: center; line-height: 220px; display: none">
                                    暂无数据
                                </h3>
                                <div class="echarsbox">
                                    <div id="main" style="width: 95%; height: 270px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="rightCard search-collapse table-striped"
                            style="display: flex; flex-direction: column">
                            <form id="user-form">
                                <input type="hidden" id="id" name="id" />
                            </form>
                            <div>
                                <div class="title">
                                    <p>设备告警数量</p>
                                </div>
                                <table id="bootstrap-table1"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图表 -->
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: layout-latest-js" />
    <th:block th:include="include :: ztree-js" />
    <script src="/js/layui.js" th:src="@{/js/layui.js}"></script>
    <script src="/js/echarts.min.js" th:href="@{/js/echart.min.js}"></script>
    <script src="/js/echarts.js" th:src="@{/js/echarts.js}"></script>
    <script th:inline="javascript">
        var treeClick = null;
        var ejdw_id = null;//组织机构一级id
        var zyq_id = null;//组织机构二级id
        var dw_3_id = null;//组织机构三级id
        var scene_id = null;//场景id
        var sceneName = null;
        $(function () {
            var panehHidden = false;
            if ($(this).width() < 769) {
                panehHidden = true;
            }
            $("body").layout({ initClosed: panehHidden, west__size: 185 });
            // 回到顶部绑定
            if ($.fn.toTop !== undefined) {
                var opt = {
                    win: $(".ui-layout-center"),
                    doc: $(".ui-layout-center"),
                };
                $("#scroll-up").toTop(opt);
            }
            renderChart();
            queryDeptTree();
            queryUserList();
            cake()
            initAZDWselect1()
            $('.azdw-select1').change(function (e) {
                var getSelectIndex = $(this).attr("data-index") || 1;
                var maxSelectIndex = 6;
                var nextSelectIndex = Number(getSelectIndex) + 1;
                let startIndex = getSelectIndex;
                while (startIndex < maxSelectIndex) {
                    startIndex++;
                    $(`#dev_azdw${startIndex}_select1`).val("").text("请选择")
                    $("#azqyname").val($('#dev_azdw1_select1').find("option:selected").text())
                    $('#equipmentId').val($(this).val())
                }
                // 获取下一级select 下拉框的数据，只有存在下一级的时候，在需要调用设置 option 方法
                if (nextSelectIndex < maxSelectIndex) {
                    initAZDWselect1(nextSelectIndex);
                }
                // 调用根据条件筛选监测点
                queryPointSelect1();
            })
        });
        // 渲染左侧树
        function queryDeptTree() {
            var options = {
                // url: "/youtian/scene-category/ztree",
                url: '/gzmx_scdw/gzmx_scdw/jichuTreeDataNew',
                // method:'get',
                expandLevel: 2,
                onClick: zOnClick,
            };
            let ab = $.tree.init(options);

            function zOnClick(event, treeId, treeNode) {
                treeClick = treeNode;
                console.log(treeNode);
                var getId = treeNode.id
                var getLevel = treeNode.level;
                var initKey = {
                    "0": "dev_azqy_id",
                    "1": "dev_azdw1_id",
                    "2": "dev_azdw2_id",
                    "3": "dev_azdw4",
                    "4": "azdw5_id",
                    "5": "id",
                }
                // 重新设置隐藏from 表单隐藏域的值
                for (const idKey in initKey) {
                    console.log(initKey[idKey], '=======');
                    // var idName = initKey[idKey];
                    // $(`#${idName}`).val('');
                    if (idKey == getLevel) {
                        var getId = treeNode.id
                        var ID = getId.toString().split('3831000000');
                        var SceID;
                        SceID = ID[ID.length - 1];
                        // initKey[idKey] = SceID;
                        let obj = {}
                        obj[initKey[idKey]] = SceID
                        if (idKey == '5') {
                            sceneName = treeNode.name
                            obj.sceneName = sceneName
                        }
                        console.log(obj, '---------->');
                        $("#id").val(SceID);
                        renderChart(obj);
                        cake(obj)
                    }
                }
                $.table.search();

            }
        }

        // 场景右侧检测图表

        function renderChart(obj) {
            $.ajax({
                // url: `/youtian/scene-category/getSceneCategory?categoryId=${id ? id : "1"}`,
                url: `/youtian/EarlyWarnin/getColumndiagram`,
                // method: 'post',
                // dataType:'json',
                data: obj,
                type: "get",
                success: function (res) {
                    console.log(res, '柱图');
                    if (res.data.length <= 0) {
                        $(".titleErr").css("display", "block");
                        $(".echarsbox").css("display", "none");
                        return;
                    } else {
                        $(".titleErr").css("display", "none");
                        $(".echarsbox").css("display", "block");
                    }
                    let echartData = res.data;
                    // 柱状图
                    var chartDom = document.getElementById("main");
                    var myChart = echarts.init(chartDom);
                    var option;
                    let echartY = [];
                    let errorTagCount = [];
                    let tagCount = [];
                    echartData.forEach((item) => {
                        echartY.push(item.dev_name);
                        errorTagCount.push(item.typesum);
                        tagCount.push(item.equipmentsum);
                    });
                    option = {
                        tooltip: {
                            trigger: "axis",
                            axisPointer: {
                                type: "shadow",
                            },
                        },
                        legend: {},
                        grid: {
                            left: "3%",
                            right: "4%",
                            bottom: "3%",
                            containLabel: true,
                        },
                        xAxis: {
                            type: "value",
                            name: "数量",
                        },
                        yAxis: {
                            type: "category",
                            name: "设备名称",
                            data: echartY,
                        },
                        series: [
                            {
                                name: "设备类型数量",
                                type: "bar",
                                stack: "total",
                                label: {
                                    show: true,
                                },
                                emphasis: {
                                    focus: "series",
                                },
                                data: errorTagCount,
                            },

                            {
                                name: "设备故障",
                                type: "bar",
                                stack: "total",
                                label: {
                                    show: true,
                                },
                                emphasis: {
                                    focus: "series",
                                },
                                data: tagCount,
                            },
                        ],
                    };

                    option && myChart.setOption(option);

                    // 饼状图

                },
            });
        }

        // 饼状图表格
        function cake(obj) {
            $.ajax({
                url: '/youtian/EarlyWarnin/getPieChart',
                data: obj,
                success: function (res) {
                    console.log(res);
                    let cakeArray = res.data;
                    let cakeArray2 = [
                        { value: cakeArray.typesum, name: '设备类型' },
                        { value: cakeArray.equipmentsum, name: '设备故障' },

                    ]
                    var chartDom = document.getElementById("cake");
                    var myChart = echarts.init(chartDom);
                    var option;
                    option = {
                        // title: {
                        //     text: "数据统计饼状图",
                        //     left: "center",
                        // },
                        tooltip: {
                            trigger: "item",
                        },
                        legend: {
                            orient: "vertical",
                            left: "left",
                        },
                        series: [
                            {
                                // name: "设备名称",
                                type: "pie",
                                radius: "50%",
                                data: cakeArray2,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: "rgba(0, 0, 0, 0.5)",
                                    },
                                },
                            },
                        ],
                    };
                    $(".isShow").css({
                        display: "none",
                    });
                    option && myChart.setOption(option);
                }
            })
        }

        function queryUserList() {
            var options = {
                id: "bootstrap-table1",
                url: `/youtian/EarlyWarnin/getEquipmentlist`,
                method: "get",
                bordered: true,
                showSearch: false,
                modalName: "用户",
                columns: [
                    {
                        field: "lx_name",
                        title: "设备类型",
                        align: "center",
                    },
                    {
                        field: "dev_name",
                        title: "设备名称",
                        align: "center",
                    },
                    {
                        field: "dev_jddj",
                        title: "设备精度",
                        align: "center",
                    },
                    {
                        field: "dev_sbzt",
                        title: "设备状态",
                        align: "center",
                    },
                    {
                        field: "dev_sccj",
                        title: "生产厂家",
                        align: "center",
                    },
                ],
            };
            $.table.init(options);
        }
        // 计算比例
        function initAZDWselect1(nextSelectIndex) {
            var params = {
                "jb": 1
            }
            nextSelectIndex = nextSelectIndex ? nextSelectIndex : 1;
            var $nextSelect = $(`#dev_azdw${nextSelectIndex}_select1`);
            if (nextSelectIndex > 1) {
                params = {
                    fdwdm: $(`#dev_azdw${nextSelectIndex - 1}_select1`).val()
                }
            }
            $.ajax({
                type: "post",
                url: "/gzmx_scdw/gzmx_scdw/list",
                data: params,
                success: function (res) {
                    var optionHTML = `<option value="">请选择</option>`
                    for (let i = 0; i < res.length; i++) {
                        optionHTML += `<option value="` + res[i].id + `">` + res[i].dwmc + `</option>`
                    }
                    $nextSelect.html(optionHTML);
                },
                error: function (error) {
                    $.modal.alertWarning(error);
                }
            });
        }

        function queryPointSelect1() {
            $("#point-select1").html(`<option value="">请选择</option>`);
            let data = {
                dw_5_id: $("#dev_azdw5_select1").val()
            };
            console.log(data, "data");
            $.ajax({
                method: "POST",
                url: "/gzmx_tag/gzmx_tag/dev_name",
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify(data),
                success: function (res) {
                    var optionHTML = `<option value="">请选择</option>`;
                    for (let i = 0; i < res.data.length; i++) {
                        var item = res.data[i];
                        optionHTML += `<option value="${item.id}"  >${item.dev_name}</option>`
                    }
                    $("#point-select1").html(optionHTML);
                    $("#upperLimit").val("")
                    $("#lowerLimit").val("")
                }
            });
        }

        //搜索
        $('#search').on('click', function () {
            $.table.search()
            let params = {
                dev_azqy_id: $('#dev_azdw1_select1').val(),
                dev_azdw1_id: $('#dev_azdw2_select1').val(),
                dev_azdw2_id: $('#dev_azdw3_select1').val(),
                dev_azdw4_id: $('#dev_azdw4_select1').val(),
                dev_azdw5_id: $('#dev_azdw5_select1').val(),
                id: $('#point-select1').val(),
            }
            cake(params)
            renderChart(params)
            console.log(params, '--->');
        })

        //重置
        $('#reset').on('click', function () {
            $.form.reset()
            cake()
            renderChart()
        })
    </script>
</body>

</html>